<template>
    <div class="commentList">
        <h3>热门评论</h3>
        <van-field class="frae" @click="updateShow" placeholder="发一条友善的评论" />
        <van-popup @close="closed" v-model="show" position="bottom" :style="{ height: '30%' }">
            <van-field v-model="message" autosize label="评论" type="textarea" maxlength="100"
                placeholder="良言一句三冬暖，恶语伤人六月寒" show-word-limit />
        </van-popup>
        <div class="comment-item" v-for="(item, i) in commentList" :key="item.id">
            <p>
                <img :src="item.info.avatar" alt="" />
                <span class="user">{{ item.info.nickname }}</span>
                <span class="zan">
                    <van-icon @click="updateFab" v-show="!fabulous" name="good-job-o" />
                    <van-icon @click="updateFab" v-show="fabulous" name="good-job" />
                    <span>{{ item.like_count }}</span>
                </span>
            </p>
            <p>{{ item.content }}</p>
            <p>
                <van-button round type="info" size="mini">
                    回复
                    <van-icon name="arrow" />
                </van-button>
                <span>{{ timer[i] }}</span>
            </p>
        </div>
    </div>
</template>

<script>
import { commentList, sendOut } from '@/request/api/home.js'
// 格式化时间戳
import timer from '@/utils/derevion.js'
export default {
    name: 'CommentList',
    data() {
        return {
            fabulous: false,
            commentList: [],
            timer: [],
            show: false,
            message: '',
        }
    },
    methods: {
        updateFab() {
            this.fabulous = !this.fabulous;
        },
        async closed() {
            // 发评论
            let res = await sendOut({
                user_id: localStorage.getItem('user_id'),
                article_id: this.$parent.detailId,
                comment_type: 0,
                reply_comment_id: '',
                content: this.message
            })
            this.$toast(res.data.msg);
            // 更新评论数据
            let result = await commentList({
                article_id: this.$parent.detailId,
                skip: 0,
                limit: 100,
                user_id: localStorage.getItem('user_id')
            });
            this.commentList = result.data.data;
            this.timer = result.data.data.map(item => timer(item.create_time, true));
        },
        updateShow() {
            this.show = !this.show;
        },
    },
    async mounted() {
        // 获取评论数据
        let result = await commentList({
            article_id: this.$parent.detailId,
            skip: 0,
            limit: 100,
            user_id: localStorage.getItem('user_id')
        });
        this.commentList = result.data.data;
        this.timer = result.data.data.map(item => timer(item.create_time, true));
    }
}
</script>

<style lang="less" scoped>
.commentList {
    width: 100%;
    overflow: hidden;
    margin-bottom: 80px;

    .frae {
        width: 200px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
    }

    .comment-item {
        width: 100%;
        border-bottom: 1px solid #e7e7e7;


        p:nth-child(1) {
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .user {
                transform: translateX(-90px);
                font-weight: 900;
            }

            img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
            }

            .zan {
                width: 80px;
                display: flex;
                justify-content: center;
            }
        }

        p:nth-child(2) {
            width: 100%;
            height: 30px;
            margin-left: 40px;
            word-break: break-all;
            word-wrap: break-word;
        }

        p:nth-child(3) {
            width: 100%;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: left;
            margin-left: 40px;
            color: #999;

            span {
                margin-left: 10px;
            }
        }
    }
}

// p:nth-child()
</style>